<template>
	<view class="game">
		<image class="close" @click="close" src="@/static/images/close.png"></image>
		<view class="name">
			<image class="info" v-if="showTag" src="@/static/images/newhone/shiwan.png"> </image>
		</view>
		<image src="../../../static/images/newhone/xingxing.png" class="xingxing"></image>
		<view class="btns" v-if="!isDemo">
			<view class="li" @click="play(1)">一发入魂</view>
			<view class="li" @click="play(3)">欧气三连</view>
			<view class="li leng" @click="play(2)">欧气5连</view>
			<view class="li leng" @click="play(10)">欧气10连</view>
		</view>
		<view class="btns" v-else>
			<view class="li leng" @click="play(1)">一发入魂</view>
		</view>
		<!-- <view class="tip">*试玩结果仅供参考</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			showTag: {
				type: Boolean,
				default: true
			},
			isDemo: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				leng: 3
			}
		},
		methods: {
			play(num) {
				this.$emit('play', num)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>
<style>
	.u-drawer-content {}
</style>
<style scoped lang="scss">
	.game {
		width: 80vw;
		height: 60vh;
		padding: 20rpx;
		box-sizing: border-box;
		background: url('@/static/images/newhone/shiwanbg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin: auto;

		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 50%;
			bottom: -100rpx;
			transform: translateX(-50%);
		}

		.name {
			font-size: 40rpx;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			margin-bottom: 80rpx;

			.info {
				width: 118rpx;
				height: 120rpx;
				position: absolute;
				right: -50rpx;
				top: 50px;
				z-index: 9999;
			}
		}

		.xingxing {
			width: 87rpx;
			height: 36rpx;
			margin-left: 69rpx;
		}



		.btns {
			display: flex;
			justify-content: space-between;
			margin: 50rpx 20rpx 30rpx;
			flex-wrap: wrap;

			.li {
				min-width: 48%;
				height: 100rpx;
				font-size: 28rpx;
				font-weight: 600;
				text-align: center;
				line-height: 100rpx;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				background: url('@/static/images/newhone/shiwanbtn.png') no-repeat;
				background-size: 100% 100%;
			}

			.leng {
				width: 100%;
			}
		}

		.tip {
			font-size: 12rpx;
			color: #999;
			text-align: center;
			margin: 20rpx 0;
			position: absolute;
			left: 50%;
			bottom: 20rpx;
			transform: translateX(-50%);
		}
	}
</style>
